// 定义three
// 基本定义世界坐标
// 定义控制事件
// 方块生成, 添加
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
const unitWidth = 10;

class Cude{
    constructor(id){
        this.id = id;
        //设置相机
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        this.camera.position.set(50, 80, 130);
        this.camera.lookAt(0, 0, 0);
        //设置场景
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0xf0f0f0);
        //设置场景 网格
        const gridHelper = new THREE.GridHelper(10*unitWidth, unitWidth);
        this.scene.add(gridHelper);

        // // 设置辅助方块
        // const rollOverGeo = new THREE.BoxGeometry(50, 50, 50);
        // let rollOverMaterial = new THREE.MeshBasicMaterial({
        //     color: 0xff0000,
        //     opacity: 0.5,
        //     transparent: true
        // });
        // this.rollOverMesh = new THREE.Mesh(rollOverGeo, rollOverMaterial);
        // this.scene.add(this.rollOverMesh);

        // // 方块
        // var texture = require('../../assets/textures/square-outline-textured.png')
        // this.cubeGeo = new THREE.BoxGeometry(50, 50, 50);
        // this.cubeMaterial = new THREE.MeshLambertMaterial({
        //     color: 0xfeb74c,
        //     map: new THREE.TextureLoader().load(texture)
        // });
        
        //设置平面
        const geometry = new THREE.PlaneGeometry(10*unitWidth, 10*unitWidth);
        geometry.rotateX(-Math.PI / 2);
        
        this.plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
            visible: true
        }));
        //多边形偏移解决深度冲突问题
        this.plane.material.polygonOffset = true;
        this.plane.material.polygonOffsetFactor = 1;
        this.plane.material.polygonOffsetUnits = 1;

        this.scene.add(this.plane);
        //设置光线
        const ambientLight = new THREE.AmbientLight(0x606060);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 0.75, 0.5).normalize();
        this.scene.add(directionalLight);
        //设置渲染器
        this.container = document.getElementById(id);
        this.renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        this.container.appendChild(this.renderer.domElement);
        
        this.render();

        this.controls = null;
        this.initControls();
    }
    initControls(){
        this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        // controls.target.set( 0, 0.5, 0 );
        this.controls.update();
        this.controls.enablePan = false;
        this.controls.enableDamping = true;
        
        let controls = this.controls;
        let renderer = this.renderer;
        let scene = this.scene;
        let camera = this.camera;
        function animate(){
            requestAnimationFrame( animate );
            controls.update();
            renderer.render(scene, camera);
        }
        animate()
        
    }
    render() {
        this.renderer.render(this.scene, this.camera);
    }
    
}
export default Cude